<template>
    <textarea ref="textareaRef" class="textarea" :value="text">
        
   </textarea>
</template>

<script setup lang="ts">
import { ref } from 'vue'
// import { useResizeObserver } from "useless/core";
import { useResizeObserver } from "../../../packages/core";

const textareaRef = ref(null)
const text = ref('')
useResizeObserver(textareaRef, (entries) => {
    const entry = entries[0]
    const { width, height } = entry.contentRect
    text.value = ` width: ${width};\n height: ${height};`
})

</script>

<style>
.textarea {
    resize: both;
    min-height: 6rem;
    min-width: 10rem;
}
</style>